<template>
  <!-- 菜单折叠按钮 -->
  <nav class="navbar navbar-static-top">
    <a href="javascript:void(0)" class="sidebar-toggle" @click="toggleSidebar">
      <i class="fa fa-bars"></i>
    </a>

    <div class="navbar-custom-menu">
      <ul class="nav navbar-nav">
        <!--<Messages></Messages>-->
        <!--<Notifications></Notifications>-->
        <!--<Tasks></Tasks>-->
        <UserMenu @changePassword="changePassword" @logout="logout"></UserMenu>
        <li>
          <a href="javascript:void(0)"><i class="fa fa-question-circle-o fa-1x"></i></a>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script>
  import Messages from "./Messages.vue"
  import Notifications from "./Notifications.vue"
  import Tasks from "./Tasks.vue"
  import UserMenu from "./UserMenu.vue"

  export default {
    name: "NavBar",
    data() {
      return {
        isSidebarCollapsed: false,
        isNarrowPageSidebarCollapse:false,
        dropDownMenu:""
      }
    },
    methods: {
      toggleSidebar() {
        let className = "hold-transition skin-blue sidebar-mini ";
        if (document.body.clientWidth>768) {
          this.isSidebarCollapsed = !this.isSidebarCollapsed;
          if(this.isSidebarCollapsed) className += "sidebar-collapse";
        }else {
          this.isNarrowPageSidebarCollapse = !this.isNarrowPageSidebarCollapse;
          if(this.isNarrowPageSidebarCollapse) className += "sidebar-open";
        }
        document.body.className = className;
      },
      logout() {
        this.$emit("logout");
      },
      changePassword() {
        this.$emit("changePassword")
      }
    },
    components:{Messages,Notifications,Tasks,UserMenu}
  }
</script>



// WEBPACK FOOTER //
// NavBar.vue?189aba78
